<template>
  <view class="product-con">
    <view class="product-con">
      <view class="navbar" :style="{ height: '96rpx', opacity: opacity }">
        <view class="navbarH" style="height:96rpx;">
          <view class="navbarCon acea-row row-center-wrapper">
            <view class="header acea-row row-center-wrapper">
              <view class="item" :class="navActive === index ? 'on' : ''" v-for="(item, index) in navList" :key="index"
                    @tap="tap(index)">{{ item }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view>
        <scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
                     :style="'height:' + height + 'px;'" @scroll="scroll">
          <view>
            <!-- #ifdef APP-PLUS || MP -->
            <view class="" style="width:100%;"></view>
            <!-- #endif -->
            <productConSwiper
                ref="proSwiper"
                :imgUrls="storeInfo.slider_image"
                :videoline="storeInfo.video_link"
                @videoPause="videoPause"
                @showSwiperImg="showSwiperImg"
            ></productConSwiper>
            <view class="wrapper">
              <view class="share acea-row row-between row-bottom">
                <view class="money font-color">
                  ￥
                  <text class="num" v-text="storeInfo.trip_dingjin || 0"></text>
                  <text>起</text>

                </view>
                <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view>
              </view>
              <view class="introduce" v-text="storeInfo.trip_title || ''"></view>
            </view>
            <view class="attribute acea-row row-between-wrapper" @click="selecAttr">
              <view class="flex">
                <view style="display: flex; align-items: center; width: 90%">
                  <view class="attr-txt">1111：</view>
                  <view class="atterTxt line1" style="width: 82%">22222</view>
                </view>
                <view class="iconfont icon-jiantou"></view>
              </view>
              <view class="acea-row row-between-wrapper" style="margin-top: 7px; padding-left: 60px"
                    v-if="skuArr.length > 1">
                <view class="flexs">
                  <image :src="item.image" v-for="(item, index) in skuArr.slice(0, 4)" :key="index"
                         class="attrImg"></image>
                </view>
                <view class="switchTxt">共{{ skuArr.length }} 种规格可选</view>
              </view>
            </view>
          </view>
          <view class="userEvaluation" v-if="replyCount">
            <view class="title acea-row row-between-wrapper">
              <view>用户评价({{ replyCount }})</view>
              <navigator class="praise" hover-class="none"
                         :url="'/pages/goods/goods_comment_list/index?product_id=' + id">
                <text class="font-num">{{ replyChance }}%</text>
                好评率
                <text class="iconfont icon-jiantou"></text>
              </navigator>
            </view>
            <block v-if="replyCount">
              <userEvaluation :reply="reply"></userEvaluation>
            </block>
          </view>
          <!-- 优品推荐 -->
          <view class="superior" v-if="good_list.length">
            <view class="title acea-row row-center-wrapper">
              <view class="lingw acea-row row-center-wrapper">
                <view class="lingn"></view>
              </view>
              <view class="titleTxt">优品推荐</view>
              <view class="lingw acea-row row-center-wrapper">
                <view class="lingn"></view>
              </view>
            </view>
            <view class="slider-banner banner">
              <swiper
                  indicator-dots="true"
                  :autoplay="autoplay"
                  :circular="circular"
                  :interval="interval"
                  :duration="duration"
                  indicator-color="#999"
                  indicator-active-color="rgba(29,176,252,1)"
                  :style="'height:' + clientHeight + 'px'"
              >
                <swiper-item v-for="(item, indexw) in good_list" :key="indexw">
                  <view class="list acea-row row-middle" :id="'list' + indexw">
                    <view class="item" v-for="(val, indexn) in item.list" :key="indexn" @click="goDetail(val)">
                      <view class="pictrue">
                        <image :src="val.image"></image>
                        <span class="pictrue_log pictrue_log_class"
                              v-if="val.activity && val.activity.type === '1' && $permission('seckill')">
                            秒杀
                        </span>
                        <span class="pictrue_log pictrue_log_class"
                              v-if="val.activity && val.activity.type === '2' && $permission('bargain')">
                            砍价
                        </span>
                        <span class="pictrue_log pictrue_log_class"
                              v-if="val.activity && val.activity.type === '3' && $permission('combination')">
                            拼团
                          </span>
                      </view>
                      <view class="name line1">{{ val.store_name }}</view>
                      <view class="money font-color">￥{{ val.price }}</view>
                    </view>
                  </view>
                </swiper-item>
                <!-- <view class="swiper-pagination" slot="pagination"></view> -->
              </swiper>
            </view>
          </view>
          <view class="product-intro" id="past0">
            <view class="title">活动介绍</view>
            <!--trip_liangdian-->
            <view class="conter">
              <!-- #ifndef APP-PLUS -->
              <parser :html="description" ref="article" :tag-style="tagStyle"></parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="description"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="product-intro" id="past1">
            <view class="title">费用介绍</view>
            <!--trip_liangdian-->
            <view class="conter">
              <!-- #ifndef APP-PLUS -->
              <parser :html="fy_description" ref="article" :tag-style="tagStyle"></parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="fy_description"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="product-intro" id="past2">
            <view class="title">行程介绍</view>
            <!--trip_liangdian-->
            <view class="conter">
              <!-- #ifndef APP-PLUS -->
              <parser :html="xc_description" ref="article" :tag-style="tagStyle"></parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="xc_description"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="product-intro" id="past3">
            <view class="title">常见问题</view>
            <!--trip_liangdian-->
            <view class="conter">
              <!-- #ifndef APP-PLUS -->
              <parser :html="cj_description" ref="article" :tag-style="tagStyle"></parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="cj_description"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="product-intro" id="past4">
            <view class="title">报名须知</view>
            <!--trip_liangdian-->
            <view class="conter">
              <!-- #ifndef APP-PLUS -->
              <parser :html="notes" ref="article" :tag-style="tagStyle"></parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="notes"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="product-intro" id="past5">
            <view class="title">隐私政策</view>
            <!--trip_liangdian-->
            <view class="conter">
              <!-- #ifndef APP-PLUS -->
              <parser :html="notice" ref="article" :tag-style="tagStyle"></parser>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="description" v-html="notice"></view>
              <!-- #endif -->
            </view>
          </view>
          <view class="uni-p-b-98"></view>
        </scroll-view>
      </view>

      <view class="footer acea-row row-between-wrapper" :class="{ eject: storeInfo.trip_id }">
        <!-- <button open-type="contact" hover-class='none' class='item'>
            <view class='iconfont icon-kefu'></view>
            <view>客服</view>
          </button> -->

        <navigator hover-class="none" class="item" open-type="switchTab" url="/pages/index/index">
          <view class="iconfont icon-shouye6"></view>
          <view class="p_center">首页</view>
        </navigator>
        <view @click="setCollect" class="item">
          <view class="iconfont icon-shoucang1" v-if="storeInfo.userCollect"></view>
          <view class="iconfont icon-shoucang" v-else></view>
          <view class="p_center">收藏</view>
        </view>
        <view class="animated item" :class="animated == true ? 'bounceIn' : ''" >
          <view class="iconfont icon-gouwuche1">
            <text class="num bg-color" v-if="parseFloat(CartCount) > 0">{{ CartCount || 0 }}</text>
          </view>
          <view class="p_center">购物车</view>
        </view>

        <view>

          <view class="bnt acea-row">
            <form @submit="goBuy" class="buy bnts" :class="!storeInfo.cart_button ? 'virbnt' : ''">
              <button class="buy bnts" :class="!storeInfo.cart_button ? 'virbnt' : ''" form-type="submit">
                立即购买
              </button>
            </form>
          </view>
        </view>

      </view>

      <swiperPrevie ref="cusSwiperImg" :list="storeInfo.slider_image"></swiperPrevie>

      <productWindow :attr="attr" :isShow="1" :iSplus="1" :limitNum="storeInfo.limit_num"
                     :unitName="storeInfo.unit_name" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
                     @ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window"
                     :is_vip="is_vip" @getImg="showImg" :is_virtual="storeInfo.is_virtual" :dateList="dateList"
                     @setDateId="setDateId">
      </productWindow>
      <!-- 分享按钮 -->
      <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
        <!-- #ifndef MP -->
        <button class="item" hover-class="none" v-if="weixinStatus === true" @click="H5ShareBox = true">
          <view class="iconfont icon-weixin3"></view>
          <view class="">发送给朋友</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <button class="item" open-type="share" hover-class="none" @click="goFriend">
          <view class="iconfont icon-weixin3"></view>
          <view class="">发送给朋友</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef H5  -->
        <div class="item copy-data" v-if="storeInfo.command_word != ''" :data-clipboard-text="storeInfo.command_word">
          <view class="iconfont icon-fuzhikouling"></view>
          <text>复制口令</text>
        </div>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="item" @click="appShare('WXSceneSession')">
          <view class="iconfont icon-weixin3"></view>
          <view class="">微信好友</view>
        </view>
        <view class="item" @click="appShare('WXSenceTimeline')">
          <view class="iconfont icon-pengyouquan"></view>
          <view class="">微信朋友圈</view>
        </view>
        <!-- #endif -->
        <button class="item" hover-class="none" @click="goPoster">
          <view class="iconfont icon-haibao"></view>
          <view class="">生成海报</view>
        </button>
      </view>
      <view class="mask" v-if="posters" @click="listenerActionClose"></view>
      <!-- #ifdef MP -->
      <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
      <!-- #endif -->
      <!-- 海报展示 -->
      <view class="poster-pop" v-if="posterImageStatus">
        <image src="../../static/images/poster-close.png" class="close" @click="posterImageClose"></image>
        <image class="poster-img" :src="posterImage"></image>
        <!-- #ifndef H5  -->
        <view class="save-poster" @click="savePosterPath">保存到手机</view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="keep">长按图片可以保存到手机</view>
        <!-- #endif -->
      </view>
      <view class="mask" v-if="posterImageStatus"></view>
      <canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
      <!-- 发送给朋友图片 -->
      <view class="share-box" v-if="H5ShareBox">
        <image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
      </view>
      <kefuIcon :ids="parseInt(id)" :routineContact="routineContact" :storeInfo="storeInfo" :goodsCon="1"></kefuIcon>
      <!-- #ifdef H5 || APP-PLUS -->
      <zb-code
          ref="qrcode"
          :show="codeShow"
          :cid="cid"
          :val="codeVal"
          :size="size"
          :unit="unit"
          :background="background"
          :foreground="foreground"
          :pdground="pdground"
          :icon="codeIcon"
          :iconSize="iconsize"
          :onval="onval"
          :loadMake="loadMake"
          @result="qrR"
      />
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import {getTripDetail, getProductCode, collectAdd, collectDel, postCartAdd} from '@/apis/store.js';
import {getUserInfo, userShare} from '@/api/user.js';

import {toLogin} from '@/libs/login.js';
import {mapGetters} from 'vuex';

import cusPreviewImg from '@/components/cusPreviewImg/index.vue';
import swiperPrevie from '@/components/cusPreviewImg/swiperPrevie.vue';
import productConSwiper from '@/components/productConSwiper';
import productWindow from '@/components/productWindow/index.vue';
import userEvaluation from '@/components/userEvaluation';
import shareRedPackets from '@/components/shareRedPackets';
import kefuIcon from '@/components/kefuIcon';
import menuIcon from '@/components/menuIcon.vue';
import {updateURLParameter} from '@/utils';
import ClipboardJS from '@/plugin/clipboard/clipboard.js';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
// #ifdef APP-PLUS
import {TOKENNAME} from '@/config/app.js';
// #endif
import {HTTP_REQUEST_URL} from '@/config/app';

let app = getApp();
import colors from '@/mixins/color';
import {sharePoster} from '@/mixins/sharePoster';
import parser from '@/components/jyf-parser/jyf-parser';


export default {
  components: {
    productConSwiper,
    productWindow,
    userEvaluation,
    shareRedPackets,
    kefuIcon,
    menuIcon,
    cusPreviewImg,
    swiperPrevie,
    // #ifdef MP
    authorize,
    // #endif
    parser,
  },
  directives: {
    trigger: {
      inserted(el, binging) {
        el.click();
      }
    }
  },
  mixins: [colors, sharePoster],
  data() {
    let that = this;
    return {
      imgHost: HTTP_REQUEST_URL,
      sysHeight: sysHeight,
      noGoods: false,
      showSkeleton: true, //骨架屏显示隐藏
      isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
      Active: false,
      presale_pay_status: 1,
      showAnimate: false,
      showMenuIcon: false,
      attrTxt: '请选择', //属性页面提示
      attrValue: '', //已选属性
      animated: false, //购物车动画
      id: 0, //商品id
      replyCount: 0, //总评论数量
      reply: [], //评论列表
      storeInfo: {}, //商品详情
      productValue: [], //系统属性
      cart_num: 1, //购买数量
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      isOpen: false, //是否打开属性组件
      actionSheetHidden: true,
      posterImageStatus: false,
      storeImage: '', //海报产品图
      PromotionCode: '', //二维码图片
      canvasStatus: false, //海报绘图标签
      posterImage: '', //海报路径
      posterbackgd: '/static/images/posterbackgd.png',
      sharePacket: {
        isState: true //默认不显示
      }, //分销商详细
      uid: 0, //用户uid
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      clientHeight: '',
      systemStore: {}, //门店信息
      good_list: [],
      replyChance: 0,
      CartCount: 0,
      isDown: true,
      storeSelfMention: true,
      posters: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {}
      },
      description: '',
      fy_description: '',
      notice: '',
      notes: '',
      cj_description: '',
      xc_description: '',
      navActive: 0,
      H5ShareBox: false, //公众号分享图片
      activity: [],
      navH: '',
      navList: ['活动介绍', '费用介绍', '行程介绍', '常见问题', '报名须知', '隐私政策'],
      dateList: [],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      toView: '',
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      tagStyle: {
        img: 'width:100%;display:block;',
        table: 'width:100%',
        video: 'width:100%;height:100%;'
      },
      returnShow: true, //判断顶部返回是否出现
      diff: '',
      is_money_level: 1,
      is_vip: 0, //是否是会员
      navbarRight: 0,
      homeTop: 20,
      routineContact: 0,
      skuArr: [],
      selectSku: {},
      currentPage: false,
      svip_price_open: 1,
      date_id: 0
    };
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV == true) {

          this.downloadFilePromotionCode();
          // this.ShareInfo();
        }
      },
      deep: true
    },
    storeInfo: {
      handler: function () {
        this.$nextTick(() => {
        });
      },
      immediate: true
    }
  },
  onLoad(options) {
    let that = this;
    var pages = getCurrentPages();
    that.returnShow = pages.length === 1 ? false : true;
    // #ifdef MP
    that.navH = app.globalData.navHeight;
    // #endif
    // #ifdef H5
    that.navH = 96;
    // #endif
    // #ifdef APP-PLUS
    that.navH = 30;
    // #endif
    that.id = options.id;
    uni.getSystemInfo({
      success: function (res) {
        that.height = res.windowHeight;
        //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
        // #ifndef APP-PLUS || H5 || MP-ALIPAY
        that.navbarRight = res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
        // #endif
      }
    });
    //扫码携带参数处理
    // #ifdef MP
    if (options.scene) {
      let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
      if (value.id) options.id = value.id;
      //记录推广人uid
      if (value.pid) app.globalData.spid = value.pid;
    }
    if (!options.id) {
      this.showSkeleton = false;
      return that.$util.Tips(
          {
            title: '缺少参数无法查看商品'
          },
          {
            tab: 3,
            url: 1
          }
      );
    } else {
      that.id = options.id;
    }
    // #endif
    that.getGoodsDetails();
  },
  onReady: function () {
    this.isNodes++;
    this.$nextTick(function () {
      // #ifdef H5
      const clipboard = new ClipboardJS('.copy-data');
      clipboard.on('success', () => {
        this.$util.Tips({
          title: '复制成功'
        });
      });
      // #endif
    });
  },
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function () {
    let that = this;
    that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
    userShare();
    return {
      title: that.storeInfo.store_name || '',
      imageUrl: that.storeInfo.image || '',
      path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid
    };
  },
  onShareTimeline() {
    let that = this;
    userShare();
    return {
      title: that.storeInfo.store_name,
      query: {
        id: that.id,
        spid: that.uid || 0
      },
      imageUrl: that.storeInfo.image
    };
  },
  // #endif
  onNavigationBarButtonTap(e) {
    this.currentPage = !this.currentPage;
  },
  methods: {
    /**
     * 设置日期价格库存ID
     * @param int id
     */
    setDateId(id) {
      this.date_id = id;
    },
    videoPause() {
      this.$nextTick(() => {
        that.infoScroll();
      });
    },
    qrR(res) {
      // #ifdef H5
      if (!this.$wechat.isWeixin() || this.shareQrcode != '1') {
        this.PromotionCode = res;
        this.followCode = '';
      }
      // #endif
      // #ifdef APP-PLUS
      this.PromotionCode = res;
      // #endif
    },
    // app分享
    // #ifdef APP-PLUS
    appShare(scene) {
      let that = this;
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由，也就是最后一个打开的页面路由
      uni.share({
        provider: 'weixin',
        scene: scene,
        type: 0,
        href: `${HTTP_REQUEST_URL}${curRoute}&spread=${that.uid}`,
        title: that.storeInfo.store_name,
        summary: that.storeInfo.store_info,
        imageUrl: that.storeInfo.small_image,
        success: function (res) {
          // uni.showToast({
          // 	title: that.$t(`分享成功`),
          // 	icon: "success",
          // });
          that.posters = false;
        },
        fail: function (err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
            duration: 2000
          });
          that.posters = false;
        }
      });
    },
    // #endif
    closeChange: function () {
      this.$set(this.sharePacket, 'isState', true);
    },
    boxStatus(data) {
      this.showAnimate = data;
    },
    // 后退
    returns() {
      // #ifdef H5
      return history.back();
      // #endif
      // #ifndef H5
      return uni.navigateBack({
        delta: 1
      });
      // #endif
    },
    tap(index) {
      var id = 'past' + index;
      var index = index;
      var that = this;

      this.$set(this, 'toView', id);
      this.$set(this, 'navActive', index);
      this.$set(this, 'lock', true);
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = index > 0 ? that.topArr[index] - app.globalData.navHeight / 2 : that.topArr[index];
      });
    },
    scroll(e) {

      var that = this, scrollY = e.detail.scrollTop;
      var opacity = scrollY / 200;
      this.old.scrollTop = e.detail.scrollTop;
      opacity = opacity > 1 ? 1 : opacity;
      that.$set(that, 'opacity', opacity);
      that.$set(that, 'scrollY', scrollY);
      that.$set(that, 'showAnimate', false);
      that.$set(that, 'showMenuIcon', false);
      that.$set(that, 'currentPage', false);
      this.$refs.proSwiper.videoIsPause();
      if (that.lock) {
        that.$set(that, 'lock', false);
        return;
      }
      for (var i = 0; i < that.topArr.length; i++) {
        if (scrollY < that.topArr[i] - app.globalData.navHeight / 2 + that.heightArr[i]) {
          that.$set(that, 'navActive', i);
          break;
        }
      }
    },
    /*
     *去商品详情页
     */
    goDetail(item) {
      if (item.activity.length == 0) {
        uni.redirectTo({
          url: '/pages/goods_details/index?id=' + item.id
        });
        return;
      }
    },
    // 微信登录回调
    onLoadFun: function (e) {
      // this.getUserInfo();
      // this.get_product_collect();
    },
    /*
     * 获取用户信息
     */
    getUserInfo: function () {
      let that = this;
      getUserInfo().then((res) => {
        that.$set(that, 'uid', res.data.uid);
        that.$set(that, 'is_money_level', res.data.is_money_level);
      });
    },


    /**
     * 获取产品详情
     */
    getGoodsDetails: function () {
      let that = this;
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      getTripDetail(that.id)
          .then((res) => {
            uni.hideLoading();
            let storeInfo = res.data.tripInfo;
            let dateList = res.data.dateList;
            that.$set(that, 'dateList', dateList);
            let good_list = res.data.good_list || [];
            let count = Math.ceil(good_list.length / 6);
            let goodArray = new Array();
            for (let i = 0; i < count; i++) {
              let list = good_list.slice(i * 6, i * 6 + 6);
              if (list.length)
                goodArray.push({
                  list: list
                });
            }
            that.$set(that, 'storeInfo', storeInfo);
            //活动介绍
            that.$set(that, 'description', storeInfo.trip_liangdian);
            // 费用介绍
            that.$set(that, 'fy_description', storeInfo.trip_xiangxi)
            //行程介绍
            that.$set(that, 'xc_description', storeInfo.trip_zhuyi)
            //常见问题
            that.$set(that, 'cj_description', storeInfo.trip_cjwt)
            //报名须知
            that.$set(that, 'notes', storeInfo.notes)
            //隐私政策
            that.$set(that, 'notice', storeInfo.notice)

            if (this.description) {
              this.description = this.description.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
              this.description = this.description.replace(/<video/gi, '<video style="width:100%;height:300px;display:block" ');
            }
            if (this.fy_description) {
              this.fy_description = this.fy_description.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
              this.fy_description = this.fy_description.replace(/<video/gi, '<video style="width:100%;height:300px;display:block" ');
            }
            if (this.xc_description) {
              this.xc_description = this.xc_description.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
              this.xc_description = this.xc_description.replace(/<video/gi, '<video style="width:100%;height:300px;display:block" ');
            }
            if (this.wt_description) {
              this.wt_description = this.wt_description.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
              this.wt_description = this.wt_description.replace(/<video/gi, '<video style="width:100%;height:300px;display:block" ');
            }
            if (this.notes) {
              this.notes = this.notes.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
              this.notes = this.notes.replace(/<video/gi, '<video style="width:100%;height:300px;display:block" ');
            }
            if (this.notice) {
              this.notice = this.notice.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
              this.notice = this.notice.replace(/<video/gi, '<video style="width:100%;height:300px;display:block" ');
            }

            if (!storeInfo.wechat_code) {
              // #ifdef H5
              this.codeVal = window.location.origin + '/pages/goods_details/index?id=' + this.id + '&spid=' + this.$store.state.app.uid;
              // #endif
              // #ifdef APP-PLUS
              this.codeVal = HTTP_REQUEST_URL + '/pages/goods_details/index?id=' + this.id + '&spid=' + this.$store.state.app.uid;
              // #endif
            } else {
              that.$set(that, 'PromotionCode', storeInfo.wechat_code);
            }
            that.$set(that, 'activity', res.data.activity ? res.data.activity : []);

            that.$set(that, 'routineContact', Number(res.data.routine_contact_type));
            uni.setNavigationBarTitle({
              title: storeInfo.trip_title.substring(0, 22) + '...'
            });
            for (let key in res.data.productValue) {
              let obj = res.data.productValue[key];
              that.skuArr.push(obj);
            }
            this.$set(this, 'selectSku', that.skuArr[0]);
            that.$set(that, 'diff', that.$util.$h.Sub(storeInfo.price, storeInfo.vip_price));
            // var navList = ['商品', '详情'];
            // if (res.data.replyCount) {
            //   navList.splice(1, 0, '评价');
            // }
            // if (goodArray.length) {
            // 	navList.splice(-1, 0, '推荐');
            // }
            // that.$set(that, 'navList', navList);
            that.$set(that, 'storeImage', that.storeInfo.image);
            that.$set(that, 'svip_price_open', res.data.svip_price_open);
            if (that.isLogin) {
              that.getUserInfo();
            }
            // #ifdef H5 || APP-PLUS
            this.getImageBase64();
            // #endif
            // #ifdef H5
            if (that.isLogin) {
              that.ShareInfo();
            }
            // #endif
            this.$nextTick(() => {
              if (good_list.length) {
                // #ifndef APP-PLUS
                that.setClientHeight();
                // #endif
                // #ifdef APP-PLUS

                setTimeout(() => {
                  that.setClientHeight();
                }, 1000);
                // #endif
              }
            });
            setTimeout(function () {
              that.infoScroll();
            }, 500);
            // #ifndef H5
            that.downloadFilestoreImage();
            // #endif
            that.DefaultSelect();
            this.showAnimate = true;
          })
          .catch((err) => {
            uni.hideLoading();
            //状态异常返回上级页面
            return that.$util.Tips(
                {
                  title: err.toString()
                },
                {
                  tab: 3,
                  url: 1
                }
            );
          });
    },
    infoScroll: function () {
      var that = this,
          topArr = [],
          heightArr = [];
      for (var i = 0; i < that.navList.length; i++) {
        //productList
        //获取元素所在位置
        var query = uni.createSelectorQuery().in(this);
        var idView = '#past' + i;
        query.select(idView).boundingClientRect();
        query.exec(function (res) {
          var top = res[0].top ?? 0;
          var height = res[0].height ?? 0;
          topArr.push(top);
          heightArr.push(height);
          that.$set(that, 'topArr', topArr);
          that.$set(that, 'heightArr', heightArr);
        });
      }
    },

    /**
     * 默认选中属性
     */
    DefaultSelect: function () {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (var key in this.productValue) {
        if (this.productValue[key].stock > 0) {
          value = this.attr.productAttr.length ? key.split(',') : [];
          break;
        }
      }
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], 'index', value[i]);
      }
      //sort();排序函数:数字-英文-汉字；

      let productSelect = this.productValue[value.join(',')];
      if (productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
        this.$set(this.attr.productSelect, 'image', productSelect.image);
        this.$set(this.attr.productSelect, 'price', productSelect.price);
        this.$set(this.attr.productSelect, 'stock', productSelect.stock);
        this.$set(this.attr.productSelect, 'unique', productSelect.unique);
        this.$set(this.attr.productSelect, 'cart_num', this.storeInfo.min_qty);
        this.$set(this, 'attrValue', value.join(','));
        this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
        this.$set(this, 'attrTxt', '已选择');
      } else if (!productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
        this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
        this.$set(this.attr.productSelect, 'stock', 0);
        this.$set(this.attr.productSelect, 'unique', '');
        this.$set(this.attr.productSelect, 'cart_num', 0);
        this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
        this.$set(this, 'attrValue', '');
        this.$set(this, 'attrTxt', '请选择');
      } else if (!productSelect && !productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
        this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
        this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock);
        this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '');
        this.$set(this.attr.productSelect, 'cart_num', this.storeInfo.min_qty);
        this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
        this.$set(this, 'attrValue', '');
        this.$set(this, 'attrTxt', '请选择');
      }
    },
    /**
     * 收藏商品
     */
    setCollect: function () {
      if (this.isLogin === false) {
        toLogin();
      } else {
        let that = this;
        if (this.storeInfo.userCollect) {
          collectDel([this.storeInfo.id]).then((res) => {
            that.$set(that.storeInfo, 'userCollect', !that.storeInfo.userCollect);
            return that.$util.Tips({
              title: res.msg
            });
          });
        } else {
          collectAdd(this.storeInfo.id).then((res) => {
            that.$set(that.storeInfo, 'userCollect', !that.storeInfo.userCollect);
            return that.$util.Tips({
              title: res.msg
            });
          });
        }
      }
    },
    /**
     * 打开属性插件
     */
    selecAttr: function () {
      this.$refs.proSwiper.videoIsPause();
      this.$set(this.attr, 'cartAttr', true);
      this.$set(this, 'isOpen', true);
    },

    onMyEvent: function () {
      this.$set(this.attr, 'cartAttr', false);
      this.$set(this, 'isOpen', false);
    },

    /*
     * 加入购物车
     */
    goCat: function (news) {

      let that = this,
          productSelect = that.productValue[this.attrValue];
      that.currentPage = false;
      //打开属性
      if (that.attrValue) {
        //默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
        that.attr.cartAttr = !that.isOpen ? true : false;
      } else {
        if (that.isOpen) that.attr.cartAttr = true;
        else that.attr.cartAttr = !that.attr.cartAttr;
      }
      //只有关闭属性弹窗时进行加入购物车
      if (that.attr.cartAttr === true && that.isOpen === false) return (that.isOpen = true);
      uni.navigateTo({
        url: '/pages/goods/order_confirm/index?trip_id='+that.id+'&line_id=' + that.date_id
      });
      return;
      //如果有属性,没有选择,提示用户选择
      if (that.attr.productAttr.length && productSelect === undefined && that.isOpen === true)
        return that.$util.Tips({
          title: '产品库存不足，请选择其它属性'
        });
      if (that.attr.productSelect.cart_num <= 0) {
        that.attr.productSelect.cart_num = 1;
        that.isOpen = false;
        return that.$util.Tips({
          title: '请选择数量'
        });
      }
      let q = {
        productId: that.id,
        cartNum: that.attr.productSelect.cart_num,
        new: news === undefined ? 0 : 1,
        uniqueId: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : '',
        virtual_type: that.storeInfo.virtual_type
      };
      postCartAdd(q)
          .then(function (res) {
            that.isOpen = false;
            that.attr.cartAttr = false;
            if (news) {
              uni.navigateTo({
                url: '/pages/goods/order_confirm/index?new=1&cartId=' + res.data.cartId
              });
            } else {
              that.$util.Tips({
                title: '添加成功',
                success: () => {

                }
              });
            }
          })
          .catch((err) => {
            that.isOpen = false;
            return that.$util.Tips({
              title: err
            });
          });
    },
    /**
     * 立即购买
     */
    goBuy: function (e) {
      this.$refs.proSwiper.videoIsPause();
      this.goCat(true);
    },
    open(data) {
      this.showMenuIcon = data;
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e;
    },
    /**
     * 分享打开
     *
     */
    listenerActionSheet() {
      this.currentPage = false;
      // #ifdef H5
      if (this.$wechat.isWeixin()) {
        this.weixinStatus = true;
      }
      // #endif

      this.posters = true;
    },
    // 分享关闭
    listenerActionClose: function () {
      this.posters = false;
      this.posterImageStatus = false;
    },
    //隐藏海报
    posterImageClose: function () {
      this.posterImageStatus = false;
    },

    // 小程序关闭分享弹窗；
    goFriend: function () {
      this.posters = false;
    },
    /*
     * 保存到手机相册
     */
    // #ifdef MP
    savePosterPath: function () {
      let that = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                uni.saveImageToPhotosAlbum({
                  filePath: that.posterImage,
                  success: function (res) {
                    that.posterImageClose();
                    that.$util.Tips({
                      title: '保存成功',
                      icon: 'success'
                    });
                  },
                  fail: function (res) {
                    that.$util.Tips({
                      title: '保存失败'
                    });
                  }
                });
              }
            });
          } else {
            uni.saveImageToPhotosAlbum({
              filePath: that.posterImage,
              success: function (res) {
                that.posterImageClose();
                that.$util.Tips({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: function (res) {
                that.$util.Tips({
                  title: '保存失败'
                });
              }
            });
          }
        }
      });
    },
    // #endif
    //#ifdef APP-PLUS
    savePosterPath() {
      let that = this;
      uni.saveImageToPhotosAlbum({
        filePath: that.posterImage,
        success: function (res) {
          that.posterImageClose();
          that.$util.Tips({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: function (res) {
          that.$util.Tips({
            title: '保存失败'
          });
        }
      });
    },
    // #endif
    //点击sku图片打开轮播图
    showImg(index) {
      this.$refs.cusPreviewImg.open(this.selectSku.suk);
    },
    showSwiperImg(index) {
      this.$refs.cusSwiperImg.open(index);
    },
    //滑动轮播图选择商品
    changeSwitch(e) {
      let productSelect = this.skuArr[e];
      this.$set(this, 'selectSku', productSelect);
      var skuList = productSelect.suk.split(',');
      this.$set(this.attr.productAttr[0], 'index', skuList[0]);

      if (skuList.length == 2) {
        this.$set(this.attr.productAttr[0], 'index', skuList[0]);
        this.$set(this.attr.productAttr[1], 'index', skuList[1]);
      } else if (skuList.length == 3) {
        this.$set(this.attr.productAttr[0], 'index', skuList[0]);
        this.$set(this.attr.productAttr[1], 'index', skuList[1]);
        this.$set(this.attr.productAttr[2], 'index', skuList[2]);
      } else if (skuList.length == 4) {
        this.$set(this.attr.productAttr[0], 'index', skuList[0]);
        this.$set(this.attr.productAttr[1], 'index', skuList[1]);
        this.$set(this.attr.productAttr[2], 'index', skuList[2]);
        this.$set(this.attr.productAttr[3], 'index', skuList[3]);
      }
      if (productSelect) {
        this.$set(this.attr.productSelect, 'image', productSelect.image);
        this.$set(this.attr.productSelect, 'price', productSelect.price);
        this.$set(this.attr.productSelect, 'stock', productSelect.stock);
        this.$set(this.attr.productSelect, 'unique', productSelect.unique);
        this.$set(this.attr.productSelect, 'vipPrice', productSelect.vipPrice);
        this.$set(this, 'attrTxt', '已选择');
        this.$set(this, 'attrValue', productSelect.suk);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  // background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
  background-color: rgba(29, 176, 252, 1);
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
  margin-left: 19rpx;
}

.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  // background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  background-color: rgba(29, 176, 252, 1);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}

.activity_title {
  font-size: 24rpx;
  color: #fff;
}

.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  // background: linear-gradient(90deg, rgba(254, 159, 15, 1) 0%, rgba(254, 178, 15, 1) 100%);
  background-color: rgba(29, 176, 252, 1);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.mask {
  z-index: 300 !important;
}

.head-bar {
  background: #fff;
}

.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.generate-posters .item .iconfont.icon-haowuquan1 {
  color: #ff954d;
}

.product-con .footer {
  padding: 0 20rpx 0 30rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  z-index: 277;
  border-top: 1rpx solid #f0f0f0;
  height: 100rpx;
  height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .footer .item .iconfont.icon-shoucang1 {
  color: rgba(29, 176, 252, 1);
}

.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  padding: 2rpx 10rpx 3rpx;
  border-radius: 200rpx;
  top: -10rpx;
  right: -10rpx;
}

.virbnt {
  width: 444rpx !important;
  height: 76rpx !important;
  border-radius: 50rpx !important;
  overflow: hidden;
}

.virbnts {
  width: 444rpx !important;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
  background-color: #22CAFD;
  border-radius: 50rpx !important;
}

.product-con .footer .bnt {
  width: 444rpx;
  height: 76rpx;
}

.product-con .footer .bnt .bnts {
  width: 222rpx;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}

.product-con .footer .bnt .joinCart {
  border-radius: 50rpx 0 0 50rpx;
  background-color: #22CAFD;
  // background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}

.product-con .footer .bnt .buy {
  border-radius: 0 50rpx 50rpx 0;
  background-color: rgba(29, 176, 252, 1);
  // background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}

.product-con .store-info {
  margin-top: 20rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #282828;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 30rpx;
  height: 126rpx;
}

.product-con .store-info .info .picTxt {
  width: 615rpx;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 76rpx;
  height: 76rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .store-info .info .picTxt .text {
  width: 522rpx;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 30rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 24rpx;
  color: #666;
  margin-top: 3rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 18rpx;
  margin-left: 10rpx;
}

.product-con .store-info .info .picTxt .text .address .addressTxt {
  max-width: 480rpx;
}

.product-con .store-info .info .iconfont {
  font-size: 40rpx;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 20rpx;
  padding-bottom: 10rpx;
}

.product-con .superior .title {
  height: 98rpx;
}

.product-con .superior .title .lingw {
  width: 23rpx;
  height: 23rpx;
  background-color: rgba(9, 139, 243, 0.1);
  transform: rotate(45deg);
}

.product-con .superior .title .lingn {
  width: 11rpx;
  height: 11rpx;
  background-color: rgba(29, 176, 252, 1);
}

.product-con .superior .title image {
  width: 30rpx;
  height: 30rpx;
}

.product-con .superior .title .titleTxt {
  margin: 0 20rpx;
  font-size: 30rpx;
  color: rgba(29, 176, 252, 1);
  // background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 690rpx;
  margin: 0 auto;
  position: relative;
}

.product-con .superior .slider-banner swiper {
  height: 100%;
  width: 100%;
}

.product-con .superior .slider-banner swiper-item {
  height: 100%;
}

.product-con .superior .slider-banner .list {
  width: 100%;
}

.product-con .superior .slider-banner .list .item {
  width: 215rpx;
  margin: 0 22rpx 30rpx 0;
  font-size: 26rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 215rpx;
  border-radius: 20rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 12rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}

button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}

button::after {
  border: 0;
}

action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}

.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}

.contact::after {
  border: none;
}

.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}

.canvas {
  z-index: 300;
  width: 750px;
  height: 1190px;
}

.poster-pop {
  width: 450rpx;
  height: 714rpx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 399;
  top: 50%;
  margin-top: -377rpx;

  .poster-img {
    border-radius: 6px;
  }
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: ：22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}

.wrapper .coupon-title {
  line-height: 44rpx;
}

.navbar .header {
  //height: 96rpx;
  font-size: 26rpx;
  color: #050505;
  background-color: #fff;
  /* #ifdef APP-PLUS */
  width: 100%;
  /* #endif */
}

.home {
  /* #ifdef H5 */
  top: 20rpx !important;
  /* #endif */
}

.navbar .header .item {
  position: relative;
  margin: 0 10rpx;
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: '';
  // background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  background-color: rgba(29, 176, 252, 1);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

.home {
  color: #333;
  position: fixed;
  /* #ifdef MP */
  width: 126rpx;
  left: 15rpx;
  /* #endif */
  /* #ifndef MP */
  width: 56rpx;
  left: 33rpx;
  /* #endif */
  height: 56rpx;
  z-index: 99;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 40rpx;
  font-size: 33rpx;

  &.right {
    right: 33rpx;
    left: unset;
  }

  &.on {
    background: unset;
    color: #333;
  }

  &.homeIndex {
    /* #ifdef MP */
    width: 98rpx;
    /* #endif */
    /* #ifndef MP */
    border-color: rgba(255, 255, 255, 0);
    /* #endif */
  }
}

.home .iconfont {
  width: 58rpx;
  text-align: center;
}

.home .line {
  width: 1rpx;
  height: 34rpx;
  background: #b3b3b3;
}

.home .icon-xiangzuo {
  font-size: 28rpx;
}

.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}

.product-con .conter {
  display: block;
}

.product-con .conter img {
  display: block;
}

.svip {
  height: 64rpx;
  padding: 0 26rpx 0 60rpx;
  margin: 24rpx 30rpx 0;
  background: url('') center/100% 100% no-repeat;
  font-size: 24rpx;
  color: #ae5a2a;
}

.svip .iconfont {
  margin-left: 12rpx;
  font-size: 24rpx;
}

.product-con .wrapper .share .money image {
  width: 66rpx;
  height: 26rpx;
}

.introduce {
  min-height: 44rpx;
}

.limit_good {
  font-size: 16rpx;
  margin: 10rpx 30rpx;
  color: red;

  .line {
    padding: 0 6rpx;
  }
}

.attrImg {
  width: 66rpx;
  height: 66rpx;
  border-radius: 6rpx;
  display: block;
  margin-right: 14rpx;
}

.switchTxt {
  height: 60rpx;
  // flex: 1;
  line-height: 60rpx;
  box-sizing: border-box;
  background: #eeeeee;
  padding: 0 10rpx;
  border-radius: 8rpx;
  text-align: center;
}

.attribute {
  padding: 10rpx 30rpx;

  .line1 {
    width: 600rpx;
  }
}

.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.flexs {
  display: flex;
}

.attr-txt {
  display: flex;
  flex-wrap: nowrap;
  width: 130rpx;
}

.presell_count {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #999999;
  padding: 20rpx 30rpx;

  .presell_time {
    margin: 8rpx 0 4rpx;

    .area_line {
      display: inline-block;
      margin: 0 6rpx;
    }
  }

  .icon-shijian1 {
    display: inline-block;
    margin-right: 4rpx;
  }
}

.presale .bnts {
  width: 444rpx;
  height: 76rpx;
  border-radius: 50rpx 50rpx;
  background-color: rgba(29, 176, 252, 1);
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}

.delete-line {
  text-decoration: line-through;
}
</style>
